import React, { PureComponent } from 'react'

export class App extends PureComponent {
  constructor() {
    super()
    this.state = {
      inputVal :'Hello'
    }
  }
  inputChange(e) {
    console.log(e.target.value);
    this.setState({inputVal: e.target.value})
    
  }
  render() {
    const { inputVal } = this.state
    // 如果传递了 value 但没有传递 onChange，那么将无法输入内容。当你通过传递 value 来控制输入框时，你需要保证输入框始终具有你传递的值。因此，如果你将一个 state 作为 value 传递，但在 onChange 事件处理程序中忘记同步更新该状态变量，React 将在每次输入后将输入框恢复到指定的 value。
    return (
      <div>
        <input type="text" value={inputVal} onChange={e => this.inputChange(e)} />
        <h2>inputValue: {inputVal }</h2>
      </div>
    )
  }
}

export default App